<template>
	<view class="content">
		<view class="listGoods">
			<view class="item" @click="toLookDetail(item.item_picture,item.item_title,item.coupon_price,item.item_final_price,item.seller_name,item.item_small_pictures,item.item_url,item.item_volume)"  v-for="(item, index) in list" :key="index" >
				<image :src="item.item_picture"></image>
				<view class="item-bottom">
					<view class="desc"><text class="jdlogo">苏宁</text> {{item.item_title}}</view>
					<view class="afterTicket"><text class="num1" v-if="listType ==1">券后价</text><text class="num1" v-if="listType == 2">券后价</text><text class="num3">&yen;{{item.item_final_price}}</text><text class="num2">&yen;{{item.item_price}}</text></view>
				</view>
				  
			</view>
		</view>
		<view class="getMore" v-if="list.length>0 && list.length>15">加载更多数据...</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list:[],
				page:1,
				listType:1, //1.苏宁推荐 2.搜索,3-当日热推榜；4-高佣爆款榜；5-团长招商榜；6-9块9专区
				searchVal:''
			}
		},onLoad(options) {
			this.listType = options.listType
			if(this.listType == 2){
				this.searchVal = options.searchVal;
			}
			this.page = 1;
			this.list = [];
			if(this.listType != 2){
				this.getBKData(this.page,this.listType);
			}else if(this.listType ==2){
				this.getSearchData(this.page);
			}
		},methods:{
			getSearchData(page){
					let opts = {
						url: 'snUnion/getSearch',
						method: 'post'
					};
					let param = {
						queryStr:this.searchVal,
						page:page
					};
					this.tokenRequest(opts, param).then(res => {
						uni.hideLoading();
						let rData = res.data;
						if(rData == null){
							uni.showToast({
								icon:'none',
							    title: '未搜索到相关结果',
							    duration: 2000
							});
							
							setTimeout(function() {
									uni.navigateBack({
									    delta: 1
									});
							}, 1500)
							return;
						}
						for (var i = 0; i < rData.length; i++) {
							rData[i].coupon_price = parseFloat(rData[i].coupon_price);
							rData[i].item_final_price = parseFloat(rData[i].item_final_price);
							rData[i].item_price = parseFloat(rData[i].item_price);
							rData[i].item_picture = rData[i].item_picture.replace('_200w_200h_4e','');
							this.list.push(rData[i]);
						}
					}, error => {})
			},
			getBKData(page,dataType){
				let opts = {
					url: 'snUnion/getRecommend/'+ page+'/'+dataType,
					method: 'get'
				};
				let param = {
				};
				this.tokenRequest(opts, param).then(res => {
					uni.hideLoading();
					let rData = res.data;
					for (var i = 0; i < rData.length; i++) {
						rData[i].coupon_price = parseFloat(rData[i].coupon_price);
						rData[i].item_final_price = parseFloat(rData[i].item_final_price);
						rData[i].item_price = parseFloat(rData[i].item_price);
						rData[i].item_picture = rData[i].item_picture.replace('_200w_200h_4e','');
						this.list.push(rData[i]);
					}
				}, error => {})
			},
			toLookDetail(item_picture,item_title,coupon_price,item_final_price,seller_name,item_small_pictures,item_url,item_volume){
				uni.showLoading({
				    title: '跳转中...'
				});
				//储存详情图
				// uni.setStorageSync('pddItem_small_pictures',item_small_pictures);
				uni.navigateTo({
					url: 'detail?item_picture='+item_picture+'&item_title='+item_title+'&coupon_price='+coupon_price+'&item_final_price='+item_final_price+'&seller_name='+seller_name+'&item_url='+item_url+'&item_volume='+item_volume
				});
			}
		},onReachBottom() {
			this.page++;
			if(this.listType !=2){
				this.getBKData(this.page,this.listType);
			}else if(this.listType == 2){
				this.getSearchData(this.page);
			}
		}
	}
</script>

<style>
	/* ⬇️ 列表详情 */
	.listGoods{
		color: #555555;
		display: flex;
		flex-wrap: wrap;
		font-size: 30rpx;
	}
	.listGoods image{
		display: block;
		width: 350rpx;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
		height: 350rpx;
	}
	.listGoods .item{
		width: 350rpx;
		border-radius: 15rpx;
		background-color: #fff;
		height: 520rpx;
		margin-left: 16rpx;
		margin-top: 18rpx;
	}
	.listGoods .afterTicket{
		margin-top: 10rpx; 
	}
	.afterTicket .num1{
		color: #ED1941;
		font-weight: 800;
		font-size: 26rpx;
		margin-right: 10rpx;
	}
	
	.afterTicket .num2{
		color: #888;
		font-size: 22rpx;
		text-decoration:line-through;
		margin-left: 15rpx;
	}
	
	.afterTicket .num3{
		color: #ED1941;
		font-size: 33rpx;
		font-weight: 800;
	}
	
	
	.listGoods .item-bottom{
		padding: 20rpx;
	}
	.listGoods .ticket{
		background-color: #DD524D;
		color: #fff;
		font-size: 20rpx;
		border-radius: 8rpx;
		padding: 0rpx 8rpx;
	}
	.listGoods .shopName{
		color: #888888;
		font-size: 22rpx;
		display: -webkit-box;
		width: 300rpx;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		margin-top: 5rpx;
		margin-bottom: 5rpx;
	}
	.listGoods .desc{
		overflow: hidden;
		height: 85rpx;
		color:#333333;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	/* ⬆️ 列表详情 */
	
</style>
